<meta charset="utf-8" />
<div class="breadcrumbs" id="breadcrumbs">
	<ul class="breadcrumb">
		<li><i class="ace-icon fa fa-home home-icon"></i> <a href="index">系统管理</a>
		</li>

		<li><span>角色管理</span></li>
	</ul>
	<!-- /.breadcrumb -->
</div>
<div class="page-content">

	<div class="row">
		<div class="col-xs-12">
			<div class="row">
				<div class="col-xs-12">
					<div class="clearfix"></div>
					<div class="table-header">角色管理</div>

					<div>
						<div id="dynamic-table_wrapper"
							class="dataTables_wrapper form-inline no-footer">
							<div class="row">
								<div class="widget">
									<div class="widget-main">
										<form class="form-inline" id="selefrom" action="role/sele"
											method="post">
											角色名称<input type="search" style="width:120px;height:30px " class="form-control input-sm"
												placeholder="输入查询内容" aria-controls="dynamic-table"
												name="selejsmc" id="selejsmc">
											角色描述<input type="search" style="width:120px;height:30px " class="form-control input-sm"
												placeholder="输入查询内容" aria-controls="dynamic-table"
												name="selejsms" id="selejsms">
											角色状态<input type="search" style="width:120px;height:30px " class="form-control input-sm"
												placeholder="输入查询内容" aria-controls="dynamic-table"
												name="selejszt" id="selejszt">
											<button id="selectfromsb" style="height:30px " class="btn btn-info btn-sm">查询</button>
											<button id="selectfromcz" style="height:30px " class="btn btn-info btn-sm">重置</button>
											<a class="btn btn-sm btn-info pull-right" href="javascript:addForm()">添加角色</a>
										</form>
									</div>
								</div>
							</div>
							<table
								class="table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable"
								id="dynamic-table" role="grid"
								aria-describedby="dynamic-table_info">
								<thead>
									<tr>
										<!-- <th class="col-xs-1">编号</th> -->
										<th >角色名称</th>
										<th >所属部门</th>
										<th >角色描述</th>
										<th >角色状态</th>
										<th >操作
										</th>
									</tr>
								</thead>

								<tbody id="rolepage">
								</tbody>
							</table>

							<div class="row">
								<div class="col-xs-12 col-md-12">
									<div class=" pull-left">
										<label>显示<select name="dynamic-table_length"
											aria-controls="dynamic-table" class="form-control input-sm" id="sel"><option
													value="10">10</option>
												<option value="20">20</option>
												<option value="50">50</option>
												<option value="100">100</option>
										</select> 条记录</label>
									</div>


									<div class="dataTables_paginate paging_simple_numbers">
										<ul class="pagination" id="get_pagination3">
										</ul>
										<div class="laypage_main laypageskin_molv" id="laypage_3">
											<span class="laypage_curr" style="background-color:#2283C5">1</span><span
												class="laypage_total"><label>到第</label><input max="1"
												min="1" class="laypage_skip" type="number"><label>页</label>
												<button type="button" class="laypage_btn">
													确定
													<tton>
											</span>
										</div>
									</div>

									<!-- <div class="dataTables_paginate paging_simple_numbers "
										id="dynamic-table_paginate">
										<ul id="package" class="pagination">
										</ul>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /.col -->
	</div>
</div>
<!-- /.添加角色 选择树形菜单 -->
<div class="hide" id="zTreecaidan">
	<div class="col-xs-3"></div>
	<div class="col-xs-6">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	<div class="col-xs-3"></div>
</div>

<!-- /.更改权限 -->
<div class="hidden" id="addqx">
	<div class="col-xs-10">
		<form id="adx" action="" method="post">
			<div class="col-xs-12">
				<div class="control-group">
					<label class="control-label bolder blue">权限选择</label> 
					<input type="hidden" name="privilege_id" id="pri2_id">
					<input type="hidden" name="role.role_id" id="role2_id">
					<div class="zTreeDemoBackground left">
						<ul id="treeDemo2" class="ztree"></ul>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="col-xs-2"></div>
</div>

<!-- 角色添加 -->
<div class="hidden" id="rolead">

	<form id="aform" action="" method="post">
		<div class="col-xs-4" class="form-group">
			<div class="control-group">
				<input type="hidden" name="role.dept_id" id="dept_id"> 
				<input type="hidden" name="privilege_id" id="pri_id"><label
					class="control-label bolder blue">权限选择</label> <input type="hidden"
					name="role.role_id">
				<div class="zTreeDemoBackground left">
					<ul id="treeDemo1" class="ztree"></ul>
				</div>
			</div>
		</div>

		<div class="form-group col-xs-8">
			<label class="control-label bolder blue col-xs-12">角色信息</label> <label
				class="col-sm-3 control-label no-padding-right" for="form-field-1">角色名称</label>
			<div class="col-sm-7">
				<input type="text" class="form-control" name="role.role_name"
					id="str2" value="" />
			</div>
			<div  class="col-sm-12 col-md-12 col-xs-12 col-lg-2" style="color:red;float: left;font: 40px;">(必填)</div>
			<label class="col-sm-3 control-label no-padding-right"
				for="form-field-1">角色描述</label>
			<div class="col-sm-7">
				<input type="text" class="form-control" name="role.role_des" />
			</div>

			<label class="col-sm-3 control-label no-padding-right"
				for="form-field-1">角色状态</label>
			<div class="col-sm-7">
				<select name="role.status" aria-controls="dynamic-table"
					class="form-control input-sm"><option value="1">启用</option>
					<option value="0">禁用</option>
				</select>
			</div>
		</div>
	</form>

</div>
<!-- 角色更改 -->
<div class="hidden" id="uprole">
	<form id="updateForm" action="" method="post">
		<input type="hidden" name="role.role_id" id="le_id">
		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right"
				for="form-field-1">角色名称</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" name="role.role_name"
					id="le_name" value="" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right"
				for="form-field-1">所属部门</label>
			<div class="col-sm-9">
				<input type="text" readonly class="form-control" name="role.role_name" id="le_depId" value="" />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right"
				for="form-field-1">角色描述</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" name="role.role_des"
					id="le_des" value="" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right"
				for="form-field-1">角色状态</label>
			<div class="col-sm-9">
				<select name="role.status" aria-controls="dynamic-table"
					class="form-control input-sm"><option value="1">启用</option>
					<option value="0">禁用</option>
				</select>
			</div>
		</div>
	</form>
</div>

<!-- 更改每页显示数据的数目 -->
<script type="text/javascript">
var sel=document.getElementById("sel");
sel.onchange=function(){
/* alert(sel.options[sel.selectedIndex].value); */
		$.post("role/gghs", {"pagen" :sel.options[sel.selectedIndex].value}, function(data) {
			pagedemo(1);							
		});}
</script>

<script type="text/javascript">
	/* 树形菜单点击事件触发弹窗 */
	function democlick(id) {
		document.getElementById("aform").reset();
		
		$('#rolead').removeClass("hidden");
		userMode = layer.open({
			type : 1,
			shade : [ 0.5 ],
			title : '添加角色', //不显示标题
			area : [ '40%', '300px' ], //显示空间
			content : $('#rolead'), //捕获的元素
			btn : [ '添加', '取消' ],
			yes : function(index, layero) { //或者使用btn1
				var str2 = document.getElementById("str2").value;
				if(str2==''){
					errorMsg('角色名称不能为空！');
					return false;
				}else{
					$.post("role/addrole", $("#aform").serialize(), function(data) {
					layer.close(index);
					$('#rolead').addClass("hidden");            //清空添加角色的弹窗
					pagedemo(1);
					layer.msg("角色添加成功！")
				}); 
				}
				 
			},
			cancel : function(index) {
				layer.close(index);
				$('#rolead').addClass("hidden"); //取消继续隐藏
			},
		});
		
		$("#dept_id").val(id);

		$.post("role/pid", {"dep_id" : id}, function(data) {
		var setting = {
 			callback: {
		onCheck: zTreeOnCheck
	}, 
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =eval(data);
		
		var code;
		
		function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo1"),
			type = { "Y":"ps", "N":"ps"};
			zTree.setting.check.chkboxType = type;
		}
		function showCode(str) {
			if (!code) code = $("#code");
			code.empty();
			code.append("<li>"+str+"</li>");
		}
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo1"), setting, zNodes);
			setCheck();
		});
		
	var objval='';
			function zTreeOnCheck(event, treeId, treeNode) {
		   var treeObj = $.fn.zTree.getZTreeObj("treeDemo1");
			 var nodes = treeObj.getCheckedNodes(true);  
 				
 				$.each(nodes,function(i,v){
 				objval+=v.id+",";
 				});
 				$("#pri_id").val(objval);
 				objval='';
			}; 
        
		});

	};
	
		
	/*权限修改  */
	function addqx(id, dep2_id) {
		document.getElementById("adx").reset();
		$("#role2_id").val(id);
		$('#addqx').removeClass("hidden");
		userMode = layer.open({
			type : 1,
			shade : [ 0.5 ],
			title : '权限更改', //不显示标题
			area : [ '20%', '500px' ], //显示空间
			content : $('#addqx'), //捕获的元素
			btn : [ '更改', '取消' ],
			yes : function(index, layero) { //或者使用btn1
				$.post("role/upprivilege", $("#adx").serialize(), function(data) {
					layer.close(index);
					$('#addqx').addClass("hidden");
				});
			},
			cancel : function(index) {
				layer.close(index);
				$('#addqx').addClass("hidden"); //取消继续隐藏
			},
		});
		$.post("role/pidd", {"role_id" : id}, function(data) {
		var setting = {
 			callback: {
		onCheck: zTreeOnCheck
	}, 
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =eval(data);
		
		var code;
		
		function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo2"),
			type = { "Y":"ps", "N":"ps"};
			zTree.setting.check.chkboxType = type;
		}
		function showCode(str) {
			if (!code) code = $("#code");
			code.empty();
			code.append("<li>"+str+"</li>");
		}
		
		
			$.fn.zTree.init($("#treeDemo2"), setting, zNodes);
			setCheck();
		
		
	var objval='';
			function zTreeOnCheck(event, treeId, treeNode) {
		   var treeObj = $.fn.zTree.getZTreeObj("treeDemo2");
			 var node = treeObj.getCheckedNodes(true);   				
 				
 				$.each(node,function(i,v){
 				objval+=v.id+",";
 				});
 				$("#pri2_id").val(objval);
 				objval='';
			}; 
        
		});
	};
	
	/* 角色删除 */

	function delejs(id) {
						//询问框
		layer.confirm('确定删除该角色？', {
			btn : [ '确定', '取消' ]
		//按钮
		}, function(index) {
		$.post("role/delerolebyid", {
			"role_id" : id
		}, function(data) {
			pagedemo(1);
			layer.close(index);
		});
		return false;
		}, function() {
			layer.msg("已取消");
		});
	}

	/* 角色更改弹窗 */
	function uprole(id, name, depId, des) {
		document.getElementById("updateForm").reset();
		$("#le_id").val(id);
		$("#le_name").val(name);
		$("#le_depId").val(depId);
		$("#le_des").val(des);

		$('#uprole').removeClass("hidden");
		userMode = layer.open({
			type : 1,
			shade : [ 0.5 ],
			title : '角色更改', //不显示标题
			area : [ '25%', '300px' ], //显示空间
			content : $('#uprole'), //捕获的元素
			btn : [ '更改', '取消' ],
			yes : function(index, layero) { //或者使用btn1
				$.post("role/update", $("#updateForm").serialize(), function(
						data) {

					layer.close(index);
					$('#uprole').addClass("hidden");
					pagedemo(1);
				});
			},
			cancel : function(index) {
				layer.close(index);
				$('#uprole').addClass("hidden"); //取消继续隐藏
			},
		});
	};
	/* 树形菜单弹窗 */
	function addForm() {
		$('#zTreecaidan').removeClass("hide");
		userModel = layer.open({

			type : 1,
			shade : [ 0.5 ],
			title : '选择部门', //不显示标题
			area : [ '20%', '400px' ], //显示空间
			content : $('#zTreecaidan'), //捕获的元素

			cancel : function(index) {
				layer.close(index);
				$('#zTreecaidan').addClass("hide"); //取消继续隐藏
			},
		});
	};
</script>

<!--  分页-->
<script type="text/javascript">
	function pageO(data){
			if(data.totalPage!=1){
				$("#laypage_3").addClass("hide");
				$("#get_pagination3").removeClass("hide");
				laypage({
				cont : $('#get_pagination3'), //容器。值支持id名、原生dom对象，jquery对象,
				pages : data.totalPage, //总页数
				skip : true, //是否开启跳页
				skin : '#2283C5',//保持ace中间的样式
				first: 1,
				last : data.totalPage, //总页数，将尾页显示为总页数
				curr : data.pageNumber,//当前页
				groups : 5, //连续显示分页数
				jump : function(obj, first) {
					if (!first) { //一定要加此判断，否则初始时会无限刷新
						pagedemo(obj.curr);
					}
					}
				});
			}else{
				$("#get_pagination3").addClass("hide");
				$("#laypage_3").removeClass("hide");
			}
			
			
	}
	




	pagedemo(1);
	function pagedemo(n) {
		$.get("role/pagedemo", {
			"pageNumber" : n
		}, function(data) {
			if(data.list==""){
				errorMsg('满足该条件的数据不存在！');
				/* document.getElementById("selectqxmc").value="";
				document.getElementById("selectqxbh").value=""; */
				return false;
			}else{
				packlist(data);
				pageO(data[0].list);
				return false;
			}
		});
	}

	function pack(data) { //填充数据
		var dataStr = "";
		$.each(data, function(i, v) {
			dataStr += packlist(v);
		});
		$("#rolepage").html(dataStr);
	}

	function packlist(data) {
		var dataStr = "";
		$.each(data, function(i, d) {
		$.each(d.list.list, function(i, v) {
		dataStr += '<tr>';
		if(v.role_name!=null){
			dataStr += '<td>' + v.role_name + '</td>';
		}else{
			dataStr += '<td></td>';
		}
		
		/* dataStr += '<td>' + v.dept_id + '</td>'; */
		dataStr += '<td>';
		$.each(d.deptlist, function(i, p) {
			if(p.dept_id==v.dept_id)
					dataStr += p.dept_name;
		});
		
		dataStr += '</td>';
		if(v.role_des!=null){
			dataStr += '<td>' + v.role_des + '</td>';
		}else{
			dataStr += '<td></td>'
		}
		dataStr += '<td>';
		if (v.status == true) {
			dataStr += '<span class="label label-sm label-success">';
			dataStr += '启用';
			dataStr += '</span>';
		} else {
			dataStr += '<span class="label label-sm label-inverse arrowed-in">';
			dataStr += ' 停用 ';
			dataStr += '</span>';
		}
		dataStr += '</td>';
		dataStr += '<td>';
		dataStr += '<div class="hidden-sm hidden-xs action-buttons pull-left">';
		dataStr += '<a class="dd green" href="javascript:uprole(' + v.role_id
				+ ',\'' + v.role_name + '\',\'' + v.dept_id + '\',\'' + v.role_des + '\')"> ';
		dataStr += '<i class="ace-icon fa fa-pencil bigger-130"></i> </a> &nbsp;&nbsp;';
		dataStr += '<a href="javascript:delejs('+v.role_id+')" class="_d red">';
		dataStr += '<i class="ace-icon fa fa-trash-o bigger-130"></i> </a> &nbsp;&nbsp;';
		dataStr += '</div> ';
		dataStr += '<div class="btn-group">';
		dataStr += '<a class="edit btn btn-sm btn-info " href="javascript:addqx('
				+ v.role_id + ',\'' + v.dept_id + '\')">';
		dataStr += '权限更改';
		dataStr += '</a>';
		dataStr += '</div>';
		dataStr += '</td>';
		dataStr += '</tr>';
		});});
				$("#rolepage").html(dataStr);
		
/* 		return dataStr;
 */	};

	
	/* 撤销查询 */
		$("#selectfromcz").click(function() {
			document.getElementById("selejsmc").value="";
			document.getElementById("selejsms").value="";
			document.getElementById("selejszt").value="";
			$.post("role/sele", $("#selefrom").serialize(), function(data) {
				pagedemo(1);
			})
			return false;
	});
	
	/* 查询 */
	$("#selectfromsb").click(function() {
		$.post("role/sele", $("#selefrom").serialize(), function(data) {
			/* 		$.each(data, function(i, d) {
			if(d.list.list==""){
				errorMsg('满足该条件的数据不存在！');
				document.getElementById("selejsmc").value="";
				document.getElementById("selejsms").value="";
				document.getElementById("selejszt").value="";
				return false;
			}else{
				packlist(data);
				packpage(data[0].list);
				return false;
			}
			}); */
			pagedemo(1);
		})
		return false;
	});
</script>



<script type="text/javascript">
	$(".dd").on('click', function(e) {
		e.preventDefault();
		$("#roleid").val(data.role_id);
		$("#role_name").val(data.role_name);
		$("#role_des").val(data.role_des);
		$("#status").val(data.status);
		$.get($(this).attr("href"), function(data) {

			var dialog = $("#updaterole").removeClass('hide').dialog({
				type : 1,
				shade : [ 0.5 ],
				modal : true,
				title : '角色更改',
				buttons : [ {
					text : "修改",
					"class" : "btn btn-primary btn-minier",
					click : function() {
						document.getElementById("updateForm").submit();
						$(this).remove();
						return false;
					}
				}, {

					text : "取消",
					"class" : "btn btn-minier",
					click : function() {
						$(this).dialog("close");
					}
				} ]

			});
		}, "json");
	});
</script>

<SCRIPT type="text/javascript">
	var setting = {
		data : {
			simpleData : {
				enable : true
			}
		}
	};

	var zNodes = ${strList};
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	
	
			//错误提示(传入错误信息)
	function errorMsg(errorInfo) {
		layer.confirm(errorInfo, {
			btn : [ '确定' ]
		//按钮
		}, function(index) {
			layer.close(index);
		});
	}
</SCRIPT>

